<template>
<div>
 <mybut v-if="isCreated" @click="isCreated=!isCreated">{{msg}}</mybut> 
</div>
</template>

<script>
import mybut from '../lesson9/mybut.vue'
export default {
  components: { mybut },
  data(){
      return{
          msg:1,
          myInterval:undefined,
          isCreated:true
      }
  },
  methods:{},
  beforeCreate(){
      console.log("beforeCreate,初始化前，不能访问数据",this.msg)
  },
  created(){
      console.log("created,Vue实例化创建完成,可以访问数据",this.msg)
  },
  beforeMount(){
      console.log("beforeMount,虚机DOM准备完毕,开始渲染")
  },
  mounted(){
      console.log("mounted,挂载完毕，可以看见界面样式")
      this.myInterval=setInterval(()=>{
          this.msg=this.msg+1
      },1000)
      this.msg=5
  },
  beforeUpdate(){
      console.log("beforeUpdate,界面更新之前，数据新，界面旧，在此钩子更新数据不会造成重复渲染",this.msg)
      this.msg+=1
  },
  updated(){
      console.log("updated,界面更新之后，数据新，界面旧",this.msg)
  },
  beforeDestroy(){
      console.log("beforeDestroy,Vue实例化销毁前(该组件销毁前),可以获取数据",this.msg)
  clearInterval(this.myInterval)
  },
  deactivated(){
      console.log("deactivated,销毁后，数据绑定与监听被移除，子实例都会被销毁",this.msg)
  }
}
</script>

<style>

</style>